<template>
  <div>
    <el-col
      :span="6"
      v-for="activityImg in hotActivityImgs"
      :key="activityImg.id"
      :xs="24"
      :sm="12"
      :md="6"
    >
      <router-link
        class="img-show"
        :to="{ name: 'Activity', params: { id: activityImg.activityId } }"
      >
        <img
          :src="'/fileServer' + activityImg.filePath"
          :alt="activityImg.fileName"
          class="show-picture"
        />
      </router-link>
    </el-col>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

const OK = 200;
const route = useRoute();
const filePageVo = ref({});
const hotActivityImgs = ref([]);
const currentPage = ref(1);
const fileDownPath = ref("");

const getFileList = async (typeId, pageNum, pageSize) => {
  try {
    const res = await axios.get("/api/files", {
      params: {
        fileTypeId: typeId,
        pageNum: pageNum,
        pageSize: pageSize,
      },
    });
    if (res.data.code === OK) {
      filePageVo.value = res.data.data;
      console.log(filePageVo.value);
      hotActivityImgs.value = filePageVo.value.list;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取文件列表失败:", error);
  }
};

const refreshPasagePage = () => {
  getFileList(3, currentPage.value, 8);
};

onMounted(() => {
  const typeId = route.query.typeId;
  getFileList(6, currentPage.value, 4);
});
</script>

<style scoped>
.show-picture {
  width: 240px;
  height: 220px;
  padding: 5px;
  cursor: pointer;
}
</style>
